<template>
  <section class="titan-tweet-root">
    <div class="titan-tweet-root_wrap">
      <a-comment
        :author="data.name"
        :datetime="data.datetime"
      >
        <template #avatar>
          <a-avatar>
            <a-image
              :src="data.avatar"
              fit="cover"
            >
              <template #error>
                <div class="titan-tweet-default-avatar">
                  {{ data.name ? data.name[0] : "" }}
                </div>
              </template>
            </a-image>
          </a-avatar>
        </template>

        <template #content>
          <div class="titan-tweet-main">
            <a-tooltip
              content="点击进入原链接查看推文"
              position="top"
              :trigger="!!data.link ? 'hover' : 'focus'"
            >
              <div
                class="titan-tweet-main_content"
                :class="{ 'cursor-pointer': !!data.link }"
                @click.stop="handleOpenLink"
              >
                <titan-translate
                  :mode="3"
                  :max="240"
                  :content="data.content"
                  :translate-content="data.translate_content"
                  :source-lang="data.source_lang || ''"
                  v-bind="attrs"
                />
              </div>
            </a-tooltip>
            <div
              class="titan-tweet-main_images"
              v-if="data.images && data.images.length"
            >
              <photo-gallery :images="data.images" />
            </div>
          </div>
        </template>

        <template #actions>
          <span class="titan-tweet-action"> <icon-thumb-up /> {{ parseIntBigNum(data.likes_count || 0).full }} </span>
          <span class="titan-tweet-action"> <icon-message /> {{ parseIntBigNum(data.comments_count || 0).full }} </span>
          <span class="titan-tweet-action"> <icon-reply /> {{ parseIntBigNum(data.repost_count || 0).full }} </span>
        </template>
      </a-comment>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ITitanTweetProps } from "@/components/tweet/src/types";
  import { parseIntBigNum } from "@/utils/number";
  import { useAttrs } from "vue";

  defineOptions({
    name: "TitanTweet",
  });

  const attrs = useAttrs();

  const props = withDefaults(defineProps<ITitanTweetProps>(), {
    data: () => ({}),
  });

  const handleOpenLink = () => {
    if (props.data.link) {
      window.open(props.data.link);
    }
  };
</script>
